<template>
  <main class="content">
    <header class="person">
      <span>王</span>
      <span>王爱琳</span>
    </header>
    <div class="list-content">
      <div class="list-item">
        <van-icon name="send-gift-o" class="icon-style" />
        <span style="width: 80%; margin-left: 20px" @click="pageChange(1)">我的收藏</span>
        <van-icon name="arrow" />
      </div>
      <div class="list-item">
        <van-icon name="browsing-history-o" class="icon-style" />
        <span style="width: 80%; margin-left: 20px" @click="pageChange(2)">违法行为识别</span>
        <van-icon name="arrow" />
      </div>
      <div class="list-item">
        <van-icon name="notes-o" class="icon-style" />
        <span style="width: 80%; margin-left: 20px" @click="pageChange(3)">行政处罚建议</span>
        <van-icon name="arrow" />
      </div>
    </div>
  </main>
</template>
<script setup>
import { onMounted } from 'vue';
const router = useRouter()

const pageChange = (val) => {
  if (val === 1) {
    router.push('/collect')
  } else if (val === 2) {
    router.push('/unlawfulAct?type=1')
  } else if (val === 3) {
    router.push('/unlawfulAct?type=2')
  }
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.content {
  background: linear-gradient(to bottom, #c6daf7, #fff);

  .person {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 260px;

    span:nth-child(1) {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      width: 50px;
      background: #018bb9;
      border-radius: 50%;
      color: #fff;
      font-size: 24px;
    }

    span:nth-child(2) {
      font-size: 18px;
      margin-left: 20px;
    }
  }

  .list-content {
    font-size: 20px;
    padding: 0 20px;

    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid #c0c0c1;

      .icon-style {
        padding: 4px;
        font-size: 28px;
        border-radius: 4px;
        color: #1471f4;
        background: #d4e5fc;
      }
    }
  }
}
</style>
